<template>
  <div class="mainbody">
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="up">
          <div class="left">
            <div class="elec-trend">
              <div class="elec-trend-title">日单耗趋势图</div>
            </div>
            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  singleCost === '1' ? 'system-button-selected' : '',
                ]"
                @click="dhtab('1')"
              >
                电
              </button>
              <button
                :class="[
                  'switch-button',
                  singleCost === '2' ? 'system-button-selected' : '',
                ]"
                @click="dhtab('2')"
              >
                纯水
              </button>
              <button
                :class="[
                  'switch-button',
                  singleCost === '3' ? 'system-button-selected' : '',
                ]"
                @click="dhtab('3')"
              >
                CDA
              </button>
            </div>
            <div class="chart_frame">
              <vechart :options="Consumption" />
            </div>
          </div>
          <div class="center">
            <div class="center_item">
              <div class="item_title">实时数据</div>
              <div class="item_content">
                <div class="tag">
                  <div class="tag_val">{{ Timedatavalue.idle }}</div>
                  <div class="tag_name">
                    <div>IDLE</div>
                    <div>（台）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Timedatavalue.pause }}</div>
                  <div class="tag_name">
                    <div>PAUSE</div>
                    <div>（台）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Timedatavalue.run }}</div>
                  <div class="tag_name">
                    <div>RUN</div>
                    <div>（台）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Timedatavalue.setup }}</div>
                  <div class="tag_name">
                    <div>SETUP</div>
                    <div>（台）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Timedatavalue.stop }}</div>
                  <div class="tag_name">
                    <div>STOP</div>
                    <div>（台）</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="center_item">
              <div class="item_title">昨日用量</div>
              <div class="item_content">
                <div class="tag">
                  <div class="tag_val">{{ Yesterdatavalue.Electricity }}</div>
                  <div class="tag_name">
                    <div>日耗电量</div>
                    <div>（kWh）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Yesterdatavalue.Liquid }}</div>
                  <div class="tag_name">
                    <div>日耗纯水量</div>
                    <div>（m³）</div>
                  </div>
                </div>
                <div class="tag">
                  <div class="tag_val">{{ Yesterdatavalue.CDA }}</div>
                  <div class="tag_name">
                    <div>CDA日用量</div>
                    <div>（m³）</div>
                  </div>
                </div>
                <!-- <div class="tag">
                  <div class="tag_val">{{ Yesterdatavalue.CDA }}</div>
                  <div class="tag_name">
                    <div>总负荷</div>
                   <div>（kWh）</div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="right">
            <div class="elec-trend">
              <div class="elec-trend-title">十大机台日耗量排名</div>
            </div>
            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  dailyCost === '1' ? 'system-button-selected' : '',
                ]"
                @click="tabtenbigv('1')"
              >
                电
              </button>
              <button
                :class="[
                  'switch-button',
                  dailyCost === '3' ? 'system-button-selected' : '',
                ]"
                @click="tabtenbigv('3')"
              >
                水
              </button>
              <button
                :class="[
                  'switch-button',
                  dailyCost === '2' ? 'system-button-selected' : '',
                ]"
                @click="tabtenbigv('2')"
              >
                气
              </button>
            </div>
            <div class="rank_list">
              <div
                class="li"
                v-for="(item, index) in this.Tenbigdatavalue"
                :key="index"
              >
                <div class="index">{{ Tenbigdatavalue[index].eqId }}</div>
                <!-- <el-progress
                  class="progressson"
                  :stroke-width="20"
                  v-if="Tenbigdatavalue[index].value"
                  :percentage="Tenbigdatavalue[index].value"
                  :show-text="true"
                /> -->
                <el-progress
                  :stroke-width="20"
                  class="progressson"
                  :percentage="Tenbigdatavalue[index].value"
                  :show-text="true"
                ></el-progress>
                <div class="index-son">
                  {{ Tenbigdatavalue[index].value1 }} {{ danwei }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="down">
          <div class="left">
            <div class="elec-trend">
              <div class="elec-trend-title">日消耗趋势图</div>
            </div>

            <div class="button-group">
              <button
                :class="[
                  'switch-button',
                  trendCost === '1' ? 'system-button-selected' : '',
                ]"
                @click="trendtabval('1')"
              >
                电/投片量
              </button>
              <button
                :class="[
                  'switch-button',
                  trendCost === '2' ? 'system-button-selected' : '',
                ]"
                @click="trendtabval('2')"
              >
                水/投片量
              </button>
              <button
                :class="[
                  'switch-button',
                  trendCost === '3' ? 'system-button-selected' : '',
                ]"
                @click="trendtabval('3')"
              >
                CDA/投片量
              </button>
            </div>

            <div class="chart_frame">
              <vechart :options="Daily" />
            </div>
          </div>

          <div class="right">
            <div class="elec-trend">
              <div class="elec-trend-title">各厂区用电分布图</div>

              <div class="button-group">
                <button
                  :class="[
                    'switch-button',
                    timeRange === 'day' ? 'system-button-selected' : '',
                  ]"
                  @click="factory('day')"
                >
                  日
                </button>
                <button
                  :class="[
                    'switch-button',
                    timeRange === 'month' ? 'system-button-selected' : '',
                  ]"
                  @click="factory('month')"
                >
                  月
                </button>
              </div>
            </div>
            <div class="charts_group">
              <div class="chart_item">
                <vechart :options="Factoryarea" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import areacharts from "./json/areacharts.json";
import twoLineChart from "./json/twoLineChart.json";
import piecharts from "./json/piecharts.json";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      singleCost: "1",
      //
      consumptionvalue: [],
      consumptionYname: "",
      consumtime: [],
      Yesterdatavalue: {},
      Timedatavalue: {},

      //
      Tenbigdata: "1",
      Tenbigdatavalue: [
        { value: 1.0, eqId: 1 },
        { value: 2.0, eqId: 2 },
        { value: 3.0, eqId: 3 },
        { value: 4.0, eqId: 4 },
        { value: 0.0, eqId: 5 },
        { value: 0.0, eqId: 6 },
        { value: 0.0, eqId: 7 },
        { value: 0.0, eqId: 8 },
      ],
      Tenbigdataname: [],
      //
      dailyCost: "1",
      //
      trendCost: "1",
      trendatavalue: [],

      timeRange: "day",
      areacharts: areacharts,
      twoLineChart: twoLineChart,
      piecharts: piecharts,
      //日消耗
      datatimer: [],
      datevalue: [],
      Xvalue: [],
      unit: "",
      classname: "",
      //厂区
      factoryday: {},
      factorymonth: {},
      crruentdata: {},
      sumdata: 1,
      allSum: 1,
      //
      classname2: "",
      danwei: "(kWh)",
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    Consumption() {
      return {
        ...this.areacharts,
        xAxis: {
          ...this.areacharts.xAxis,
          data: this.consumtime,
        },
        yAxis: {
          ...this.areacharts.yAxis,
          name: this.consumptionYname,
        },
        series: {
          ...this.areacharts.series[0],
          data: this.consumptionvalue,
        },
      };
    },
    Daily() {
      this.classname2 = this.unit.split("(")[0];
      // console.log(this.classname2, "单位");
      return {
        ...this.twoLineChart,
        yAxis: [
          {
            name: this.unit,
            nameTextStyle: {
              fontSize: 12,
              color: "rgba(255,255,255)",
            },
            type: "value",
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            name: "投片量（片）",
            nameTextStyle: {
              fontSize: 12,
              color: "rgba(255,255,255)",
            },
            type: "value",
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        xAxis: {
          ...this.twoLineChart.xAxis,
          data: this.datatimer,
        },
        legend: {
          data: [this.classname2, "投片量"],
          icon: "roundRect",
          itemWidth: 15,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        series: [
          {
            ...this.twoLineChart.series[0],
            data: this.datevalue,
            name: this.classname2,
          },
          {
            ...this.twoLineChart.series[1],
            data: this.Xvalue,
          },
        ],
      };
    },

    Factoryarea() {
      if (this.crruentdata.time == undefined) {
        return this.piecharts;
      } else {
        // console.log(this.crruentdata.countNum);
        let that = this;
        this.sumdata =
          that.crruentdata.countNum[0].arry +
          that.crruentdata.countNum[0].el +
          that.crruentdata.countNum[0].mod +
          that.crruentdata.countNum[0].touch;
        // console.log(this.sumdata, "总数");
        return {
          ...this.piecharts,
          dataset: {
            ...this.piecharts,
            source: [
              this.crruentdata.time,
              this.crruentdata.arry,
              this.crruentdata.el,
              this.crruentdata.mod,
              this.crruentdata.touch,
            ],
          },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
            },
            { type: "line", smooth: true, seriesLayoutBy: "row" },
            { type: "line", smooth: true, seriesLayoutBy: "row" },
            { type: "line", smooth: true, seriesLayoutBy: "row" },
            {
              name: "日用电量",
              type: "pie",
              center: ["25%", "55%"],
              radius: ["40%", "55%"],
              label: {
                // formatter: "{b}: {@2012} ({d}%)",
                formatter: function (val) {
                  // console.log(val, 999999);

                  let num = 1,
                    sum = 0;
                  num = that.sumdata;
                  let arrdata = val.value.slice(0);
                  arrdata.shift();
                  for (var i = 0, len = arrdata.length; i < len; i++) {
                    sum += arrdata[i] - 0;
                  }
                  return (
                    val.value[0] +
                    "(" +
                    ((sum / num) * 100).toFixed(2) +
                    "%)" +
                    sum
                  );
                },
                rich: {
                  per: {
                    color: "#00f4ff",
                    padding: [2, 4],
                    borderRadius: 2,
                  },
                },
                fontSize: 12,
                color: "#00f4ff",
              },
              labelLine: {
                lineStyle: {
                  color: "#ddd",
                },
              },
              encode: {
                itemName: "timer",
                value: this.crruentdata.time[1],
                tooltip: "2021-03-28",
              },
            },
          ],
        };
      }
    },
  },
  methods: {
    async searchEnergy() {
      var querydata = new FormData();
      querydata.append("struts", this.singleCost);
      await this.proposal
        .searchEnergyConsumptionByDay(querydata)
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.consumtime = res.data.data.time;
            this.consumptionvalue = res.data.data.value;
            this.consumptionYname = res.data.data.unit;
            this.classname = res.data.data.unit.split("(")[0];
          }
        })
        .catch(function (error) {
          console.log("请求日单耗趋势请求失败");
        });
    },

    async YesterdayData() {
      await this.proposal
        .searchYesterdayData()
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.Yesterdatavalue = res.data.data;
          }
        })
        .catch(function (error) {
          console.log("昨日用量请求失败");
        });
    },
    async searchReal() {
      await this.proposal
        .searchRealTimeData()
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.Timedatavalue = res.data.data;
          }
        })
        .catch(function (error) {
          console.log("请求实时数据失败");
        });
    },

    async DataByEQ() {
      var queryDat = new FormData();
      queryDat.append("total", this.Tenbigdata);
      await this.proposal
        .searchYesterdayDataByEQ(queryDat)
        .then((res) => {
          if (res.data.code == 200) {
            // console.log(res.data.data, "123");
            this.Tenbigdatavalue = res.data.data.values;
            this.allSum = Math.abs(res.data.data.allSum);

            for (var i = 0; i < this.Tenbigdatavalue.length; i++) {
              this.Tenbigdatavalue[i].value1 = this.Tenbigdatavalue[i].value;
              this.Tenbigdatavalue[i].value =
                Math.floor(
                  (this.Tenbigdatavalue[i].value / this.allSum) * 100
                ) > 100
                  ? 100
                  : Math.floor(
                      (this.Tenbigdatavalue[i].value / this.allSum) * 100
                    );
            }
          }
        })
        .catch(function (error) {
          this.Tenbigdatavalue = [
            { value: 0.0, eqId: 1 },
            { value: 0.0, eqId: 2 },
            { value: 0.0, eqId: 3 },
            { value: 0.0, eqId: 4 },
            { value: 0.0, eqId: 5 },
            { value: 0.0, eqId: 6 },
            { value: 0.0, eqId: 7 },
            { value: 0.0, eqId: 8 },
          ];
          console.log("请求十大机台接口失败");
        });
    },

    async Trend() {
      // console.log(this.trendCost);
      var queryDat = new FormData();
      queryDat.append("struts", this.trendCost);
      await this.proposal
        .searchConsumeBy7Day(queryDat)
        .then((res) => {
          if (res.data.code == 200) {
            // console.log(res.data);
            this.datatimer = res.data.data.time;
            this.datevalue = res.data.data.value;
            this.Xvalue = res.data.data.screen;
            this.unit = res.data.data.unit;
          }
        })
        .catch(function (error) {
          console.log("请求日消耗趋势接口失败");
        });
    },

    async Factory() {
      await this.proposal
        .searchFactoryElectricityByTime()
        .then((res) => {
          if (res.data.code == 200) {
            // console.log(res.data.data);
            this.crruentdata = res.data.data.day;

            this.factoryday = res.data.data.day;
            this.factorymonth = res.data.data.month;
            this.crruentdata.time.unshift("timer");
          }
        })
        .catch(function (error) {
          console.log("请求各厂区接口失败");
        });
    },
    dhtab(val) {
      this.singleCost = val;
      this.searchEnergy();
    },
    tabtenbigv(val) {
      this.dailyCost = val;
      this.Tenbigdata = val;
      if (val == 1) {
        this.danwei = "(kWh)";
      } else if (val == 2) {
        this.danwei = "m³";
      } else if (val == 3) {
        this.danwei = "m³";
      }
      this.DataByEQ();
    },
    trendtabval(val) {
      this.trendCost = val;
      this.Trend();
    },
    factory(val) {
      this.timeRange = val;
      if (this.timeRange == "day") {
        this.crruentdata = this.factoryday;
        // console.log(this.crruentdata);
      } else if (this.timeRange == "month") {
        this.crruentdata = this.factorymonth;
        // console.log(this.crruentdata);
      }
    },
  },
  created() {
    let that = this;
    this.searchEnergy();
    this.YesterdayData();
    that.searchReal();
    this.DataByEQ();
    this.Trend();
    this.Factory();
    setInterval(function () {
      that.searchReal();
    }, 120000);
  },
};
</script>
<style lang="scss" scoped>
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
  .container {
    position: relative;
    width: 92%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    .view-frame {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      height: 89%;
      overflow-y: scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        // 兼容Chrome
        display: none;
      }
      &::-o-scrollbar {
        // 兼容Opera
        display: none;
      }
      scrollbar-width: none; // 兼容Firefox
      -ms-overflow-style: none; // 兼容edge
      .up {
        // flex-basis: 50%;
        height: 420px;
        display: flex;
        justify-content: space-between;
        .left,
        .right {
          flex-basis: 34%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
        }
        .center {
          flex-basis: 30%;
          display: flex;
          flex-flow: column;
          .center_item {
            flex-basis: 50%;
            display: flex;
            flex-flow: column;
            .item_title {
              flex-basis: 35%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 2.2rem;
              color: #fff;
            }

            .item_content {
              flex-basis: 60%;
              display: flex;
              justify-content: space-around;
              background: url("~@assets/report/tag-bj.png") no-repeat;
              background-size: 100% 100%;
              .tag {
                flex-basis: 25%;
                height: 100%;
                display: flex;
                flex-flow: column;
                justify-content: center;
                position: relative;
                .tag_name {
                  flex-basis: 30%;
                  flex-flow: column;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 1.4rem;
                  color: #fff;
                }
                .tag_val {
                  flex-basis: 30%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 2rem;
                  font-weight: 600;
                  color: #00f4ff;
                }
                .tag_kuang {
                  position: absolute;
                  left: 1%;
                  top: 85%;
                  background: url("~@assets/report/tip.png") no-repeat;
                  background-size: 100% 100%;
                  width: 170px;
                  height: 76px;
                  font-size: 14px;
                  text-align: center;
                  display: flex;
                  flex-flow: row-reverse;
                  display: none;
                  .tag_kuang-son {
                    padding-top: 15px;
                    flex-basis: 50%;
                    line-height: 28px;
                    .tag_kuang-son-number {
                      font-size: 18px;
                    }
                    .tag_kuang-son-numberred {
                      color: #00f4ff;
                    }
                    .tag_kuang-son-numberblue {
                      color: #ff3e59;
                    }
                    .tag_kuang-son-title {
                      font-size: 12px;
                    }
                  }
                }
              }
              .tag:hover {
                .tag_kuang {
                  display: flex;
                }
              }
            }
          }
        }
        .chart_frame {
          flex-basis: 70%;
          width: 100%;
        }
        .rank_list {
          flex-basis: 70%;
          width: 100%;
          display: flex;
          flex-flow: column;
          .li {
            width: 100%;
            height: 2rem;
            margin: 0.5rem auto;
            display: flex;
            position: relative;
            .index {
              width: 16%;
              height: 2rem;
              line-height: 2rem;
              color: #fff;
              font-size: 1.6rem;
              background: rgb(46, 101, 194);
              text-align: center;
              position: relative;
              margin-left: 1rem;
            }
            .progressson {
              margin-left: 3rem;
            }
            .index-son {
              font-size: 16px;
              color: #fff !important;
              position: absolute;
              left: 80%;
              // display: none;
            }

            /deep/.el-progress__text {
              margin-left: 0 !important;
            }
            /deep/.el-progress-bar {
              padding-right: 0px !important;
            }
            .index:before {
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-top: 2rem solid rgb(46, 101, 194);
              border-right: 1rem solid transparent;
              position: absolute;
              right: -1rem;
            }
            .index:after {
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-bottom: 2rem solid rgb(46, 101, 194);
              border-left: 1rem solid transparent;
              position: absolute;
              left: -1rem;
              top: 0;
            }
            /deep/.el-progress {
              width: 52%;
              height: 1.8rem;
            }
            /deep/.el-progress-bar__outer {
              border-radius: 0;
              background: rgb(2, 50, 99);
            }
            /deep/.el-progress-bar__inner {
              background: rgb(7, 80, 159);
              border-radius: 0;
            }
            /deep/.el-progress__text {
              color: #fff;
            }
          }
          // .li:hover {
          //   .index-son {
          //     display: block !important;
          //   }
          // }
          .li:first-child {
            .index {
              background: rgb(227, 74, 92);
            }
            .index:before {
              border-top: 2rem solid rgb(227, 74, 92);
            }
            .index:after {
              border-bottom: 2rem solid rgb(227, 74, 92);
            }
            /deep/.el-progress-bar__inner {
              background: rgb(227, 74, 92);
            }
          }
          .li:nth-child(2) {
            .index {
              background: rgb(213, 144, 189);
            }
            .index:before {
              border-top: 2rem solid rgb(213, 144, 189);
            }
            .index:after {
              border-bottom: 2rem solid rgb(213, 144, 189);
            }
            /deep/.el-progress-bar__inner {
              background: rgb(213, 144, 189);
            }
          }
          .li:nth-child(3) {
            .index {
              background: rgb(22, 155, 154);
            }
            .index:before {
              border-top: 2rem solid rgb(22, 155, 154);
            }
            .index:after {
              border-bottom: 2rem solid rgb(22, 155, 154);
            }
            /deep/.el-progress-bar__inner {
              background: rgb(22, 155, 154);
            }
          }
          /deep/.el-progress__text {
            display: none !important;
          }
        }
      }
      .down {
        flex-basis: 50%;
        display: flex;
        justify-content: space-between;
        .left {
          flex-basis: 34%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
        }
        .right {
          flex-basis: 64%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          .button-group {
            flex-basis: 9%;
          }
          .charts_group {
            flex-basis: 91%;
            display: flex;
            justify-content: space-between;
            .chart_item {
              flex-basis: 100%;
              .chart_item-son {
                height: 100%;
                // width: 100%;
                // background: red;
              }
            }
          }
        }
      }
    }
  }
}
.button-group {
  text-align: center;
  flex-basis: 8%;
}
.switch-button {
  padding: 0 1rem;
  height: 2.6rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.2rem;
  color: #fff;
  border: 1px solid #fff;
  background: transparent;
  outline: none;
  margin-left: 1rem;
}
.system-button-selected {
  background: #00f4ff;
  color: #0b1c4a;
}
.elec-trend {
  width: 100%;
  display: flex;
  flex-basis: 10%;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3rem;
}
.chart_frame {
  flex-basis: 70%;
  width: 100%;
}
</style>
